<template>
  <div class="common-layout">
    <el-container>
      <el-header>
        <img src="https://www.cpiccdn.com/images/v2/common/dyh_logo.png" alt="sign">
        <el-dropdown :hide-on-click="false">
          <span class="el-dropdown-link">
            保险超市
          </span>
          <template #dropdown>
            <el-dropdown-menu>
              <el-dropdown-item>Action 1</el-dropdown-item>
              <el-dropdown-item>Action 2</el-dropdown-item>
              <el-dropdown-item>Action 3</el-dropdown-item>
              <el-dropdown-item disabled>Action 4</el-dropdown-item>
              <el-dropdown-item divided>Action 5</el-dropdown-item>
              <el-dropdown-item divided>Action 6</el-dropdown-item>
            </el-dropdown-menu>
          </template>
        </el-dropdown>
        <el-dropdown :hide-on-click="false">
          <span class="el-dropdown-link">
            服务大厅
          </span>
          <template #dropdown>
            <el-dropdown-menu>
              <el-dropdown-item>Action 1</el-dropdown-item>
              <el-dropdown-item>Action 2</el-dropdown-item>
              <el-dropdown-item>Action 3</el-dropdown-item>
              <el-dropdown-item disabled>Action 4</el-dropdown-item>
              <el-dropdown-item divided>Action 5</el-dropdown-item>
              <el-dropdown-item divided>Action 6</el-dropdown-item>
            </el-dropdown-menu>
          </template>
        </el-dropdown>
        <el-dropdown :hide-on-click="false">
          <span class="el-dropdown-link">
            会员中心
          </span>
          <template #dropdown>
            <el-dropdown-menu>
              <el-dropdown-item>Action 1</el-dropdown-item>
              <el-dropdown-item>Action 2</el-dropdown-item>
              <el-dropdown-item>Action 3</el-dropdown-item>
              <el-dropdown-item disabled>Action 4</el-dropdown-item>
              <el-dropdown-item divided>Action 5</el-dropdown-item>
              <el-dropdown-item divided>Action 6</el-dropdown-item>
            </el-dropdown-menu>
          </template>
        </el-dropdown>
        <el-dropdown :hide-on-click="false">
          <span class="el-dropdown-link">
            信息公开
          </span>
          <template #dropdown>
            <el-dropdown-menu>
              <el-dropdown-item class="el-dropdown-item--divided">
                关于太保
              </el-dropdown-item>
              <el-dropdown-item>
                <a href="https://www.cpic.com.cn/aboutUs/zgtbgk/jtjj/">中国太保概况</a>
              </el-dropdown-item>
              <el-dropdown-item>
                <a href="https://www.cpic.com.cn/aboutUs/ywbj/jyfw/">业务布局</a>
              </el-dropdown-item>
              <el-dropdown-item>
                <a href="https://www.cpic.com.cn/aboutUs/rlzy/rsrm/">人力资源</a>
              </el-dropdown-item>
              <el-dropdown-item>
                <a href="https://www.cpic.com.cn/aboutUs/qywh/">企业文化</a>
              </el-dropdown-item>
              <el-dropdown-item>
                <a href="https://www.cpic.com.cn/aboutUs/qtxx/ggzz/">其他信息</a>
              </el-dropdown-item>
              <el-dropdown-item>
                <a href="https://www.cpic.com.cn/aboutUs/bshkygzz/gzzjj/">博士后科研工作站</a>
              </el-dropdown-item>
              <el-dropdown-item divided class="el-dropdown-item--divided">
                集团旗下企业
              </el-dropdown-item>
              <el-dropdown-item>
                <a href="https://property.cpic.com.cn/xccbx/gygs/gsjs/">中国太平洋财产保险股份有限公司</a>
              </el-dropdown-item>
              <el-dropdown-item>
                <a href="https://life.cpic.com.cn/xrsbx/shsgzwxqyxxgk/?subMenu=1">中国太平洋人寿保险股份有限公司</a>
              </el-dropdown-item>
              <el-dropdown-item>
                <a href="https://asset.cpic.com.cn/xzcgl/xgygs/">太平洋资产管理有限责任公司</a>
              </el-dropdown-item>
              <el-dropdown-item>
                <a href="https://health.cpic.com.cn/jkx/shsgzwxtqyxxgk/">太平洋健康保险股份有限公司</a>
              </el-dropdown-item>
            </el-dropdown-menu>
          </template>
        </el-dropdown>
        <el-input size="large" style="width: 250px" placeholder="搜索你感兴趣的保险类型或服务" :prefix-icon="Search"/>
        <div class="div">
          <el-link :underline="false" type="primary" @click="this.$router.push('/login')">
            登录
          </el-link>&nbsp;&nbsp;|&nbsp;&nbsp;
          <el-link :underline="false" type="primary" @click="this.$router.push('/register')">
            注册
          </el-link>
        </div>
      </el-header>
      <el-main>
        <a href="#">aaa</a>
      </el-main>
      <el-footer>Footer</el-footer>
    </el-container>
  </div>
</template>

<script setup lang="ts">
import {ref} from 'vue'
import {Search, User} from '@element-plus/icons-vue'

</script>

<style scoped>
.el-header {
  background: url("https://www.cpic.com.cn/images/v2/common/dyh_img_head.png") left top / 100% 100% no-repeat;
  width: 100%;
  height: 100px;
}

.el-dropdown {
  margin-left: 45px;
  margin-top: 35px;
  font-size: 17px;
  font-weight: bold;
}

.el-dropdown-link {
  color: white;
  cursor: pointer;
  outline: none;
}

.el-dropdown-item--divided {
  color: black;
  font-size: 10px;
  font-weight: bold;
}

img {
  width: 150px;
  margin-left: 100px;
  margin-top: 25px;
}

a {
  text-decoration: none;
  color: #551A8B;
  font-size: 12px;
}

.el-input {
  margin-top: -40px;
  margin-left: 90px;
}

.el-link {
  font-size: 20px;
  color: white;
}

.el-link:hover {
  color: #6892f3;
}

.div {
  color: white;
  font-size: 20px;
  margin-left: 1150px;
  margin-top: -44px;
}
</style>
